<template>
	<view class="password-page">
		<view class="pass-box">
			<view class="item">
				<view class="item-l">原密码</view>
				<u-input  v-model="oldNum" password="true" clearable="true"  placeholder="请输入原密码" />
			</view>
			<view class="item">
				<view class="item-l">新密码</view>
				<u-input  v-model="newNum" password="true" clearable="true"  placeholder="请输入新密码" />
			</view>
			<view class="item">
				<view class="item-l">确认密码</view>
				<u-input  v-model="newNum2" password="true" clearable="true"  placeholder="请输入确认密码" />
			</view>
		</view>
		<btn text="确认" @onBtnClick="onBtnClick" />
	</view>
</template>

<script>
	import btn from '../../../../components/btn/index.vue'
	import storage from '@/utils/storage'
	import constant from '@/utils/constant'
	export default{
		components: {
			btn
		},
		data() {
			return {
				oldNum: '',
				newNum: '',
				newNum2: ''
			}
		},
		methods: {
			async onBtnClick() {
				if(this.oldNum.trim() == '') {
					uni.showToast({
						title: '请输入原密码',
						icon: 'none'
					})
				}else if(this.newNum.trim() == '') {
					uni.showToast({
						title: '请输入新密码',
						icon: 'none'
					})
				}else if(this.newNum2.trim() == '') {
					uni.showToast({
						title: '请确认密码',
						icon: 'none'
					})
				}else if(this.newNum2 != this.newNum) {
					uni.showToast({
						title: '两次密码不一致',
						icon: 'none'
					})
				}else{
					uni.showLoading({
						title: '修改密码中',
						mask: true
					})

					userUpdatePassword({
						password: this.oldNum,
						newPassword: this.newNum
					}).then(response => {
						uni.hideLoading()
						uni.showToast({
							title: '修改成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/login/index' 
							})
						}, 2000)
					})			
				}
			}
		}
	}
</script>

<style scoped>
	.password-page{
		height: 100vh;
		padding: 30rpx 24rpx 72rpx 24rpx;
		box-sizing: border-box;
		background: #F9F9FA;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.pass-box{
		background: #FFFFFF;
		border: 1px solid #E5E5E6;
		border-radius: 8rpx;
	}
	.item{
		height: 98rpx;
		padding: 0 25rpx;
		border-bottom: 1px solid #ECECEC;
		display: flex;
		align-items: center;
	}
	.item-l{
		width: 120rpx;
		white-space: nowrap;
	}
	.item input{
		flex: 1;
		padding: 0 35rpx;
	}
	.item image{
		width: 28rpx;
		height: 28rpx;
	}
</style>

